<template>
	<view>
		<view class="renwu-list">
			<view class="renwu-item">
				<view class="renwu-title">{{ detail.name }}</view>
				<view class="renwu-time">
					<text class="lable">领取时间：</text>
					<text class="content">{{detail.start_on && detail.start_on.substr(0, 10)}} 至 {{detail.end_on && detail.end_on.substr(0, 10)}}</text>
				</view>
				<view class="renwu-time">
					<text class="lable">可领取任务等级：</text>
					<text class="content">
						<text style="display: inline-block;padding-right: 20rpx;" v-for="(voo,idx) in detail.task_levels_text">{{ voo.name }} </text>
					</text>
				</view>
				<view class="renwu-time">
					<text class="lable">任务周期：</text>
					<text class="content">任务领取后{{ detail.task_duration }}天</text>
				</view>
				<view class="renwu-time">
					<text class="lable">奖励周期：</text>
					<text class="content">任务完成后{{ detail.reward_duration }}天</text>
				</view>
				<view class="renwu-time">
					<text class="lable">完成规则：</text>
					<view class="rules-item" v-if="detail.finish_rules.team_consume && detail.finish_rules.team_consume.flag==1">
						新增团队业绩金额满 {{ detail.finish_rules.team_consume.amount}} 元
					</view>
					<view class="rules-item" v-if="detail.finish_rules.total_consume && detail.finish_rules.total_consume.flag==1">
						新增自购订单金额满 {{ detail.finish_rules.total_consume.amount}} 元
					</view>
					<view class="rules-item" v-if="detail.finish_rules.team_child && detail.finish_rules.team_child.flag==1">
						新增团队人数满 {{ detail.finish_rules.team_child.amount}} 人
					</view>
					<view class="rules-item" v-if="detail.finish_rules.team_child_direct && detail.finish_rules.team_child_direct.flag==1">
						新增直推客户满 {{ detail.finish_rules.team_child_direct.amount}} 人
					</view>
					<view class="rules-item" v-if="detail.finish_rules.team_child_agent_direct && detail.finish_rules.team_child_agent_direct.flag==1">
						新增直推代理商满 {{ detail.finish_rules.team_child_agent_direct.amount}} 人
					</view>
					<view class="rules-item" v-if="detail.finish_rules.team_child_agent_all && detail.finish_rules.team_child_agent_all.flag==1">
						新增团队代理商满 {{ detail.finish_rules.team_child_agent_all.amount}} 人
					</view>
					<view v-for="(vo,index) in detail.finish_rules.team_child_agent">
						<view class="rules-item" v-if="vo.flag==1">
							新增团队-{{vo.name}}满 {{vo.amount}}人
						</view>
					</view>
					<view class="rules-item" v-if="detail.finish_rules.team_child_line && detail.finish_rules.team_child_line.flag==1">
						新增{{ detail.finish_rules.team_child_line.num}}条线各产生 等级{{ detail.finish_rules.team_child_line.level}}者 {{ detail.finish_rules.team_child_line.amount}} 人
					</view>
				</view>
				<view class="renwu-time">
					<text class="lable">奖励规则：</text>
					
					<view v-for="(vo,index) in detail.reward_rules" style="display: flex; align-content: center;" v-if="vo && vo.awards">
						<view style="width: 120px; text-align: right;">{{vo && vo.name}}可得:</view>
						<view v-if="vo && vo.awards">
						<view v-for="(vo1,index1) in vo.awards" style="display: flex;padding-left: 20rpx; justify-content: center; align-content: center;" v-if="vo1.num>0">
							{{vo1 && vo1.num}} 个 {{vo1 && vo1.name}}
						</view>
						</view>
					</view>
					
				</view>
				<view class="renwu-footer">
					<view class="btn-renwu-a" @tap="receiveTask()">立即参与</view>
				</view>
			</view>
		</view>
		
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" :shareDetail="shareInfo" posterType="goods"></shopro-share>
		<!-- 登录 -->
		<shopro-auth-modal :spm="spm"></shopro-auth-modal>
	</view>
</template>

<script>
	import share from '@/shopro/share';
	import store from '@/shopro/store'
	import { mapMutations,mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				id: '',
				detail: {
					finish_rules: {},
					reward_rules: {},
				},
				showShare: false,
				shareInfo: {},
				spm: ''
			}
		},
		computed: {
			...mapState({
				isLogin: ({
					user
				}) => user.isLogin,
				authType: ({
					user
				}) => user.authType
			})
		},
		onLoad(opt){
			this.id = opt.id;
			console.log(this.id);
		},
		onShow() {			
			let that = this;
			if(!this.isLogin){
				store.dispatch('showAuthModal', 'accountLogin');
			}
			this.init();
		},		
		methods: {
			init(){
				let that = this;
				uni.showLoading({title: '加载中'});
				that.$http('task.detail', {id: this.id}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						that.detail = res.data;
						that.detail.finish_rules = JSON.parse(that.detail.finish_rules);
						that.detail.reward_rules = JSON.parse(that.detail.reward_rules);
						for(let i=0; i<that.detail.reward_rules.length; i++){						
							let exists = false;
							if(that.detail.reward_rules[i].awards){
								that.detail.reward_rules[i].awards.forEach(itt=>{
									if(itt.num>0){
										exists = true;
									}
								})
							}
							if(!exists){
								delete that.detail.reward_rules[i];
							}
						}						
						that.shareInfo = share.setShareInfo({
							link: `${store.state.shopro.config.shop?.domain}#/pages/app/renwu/detail?id=${that.$Route.query.id}`,
							title: "任务活动",
							desc: that.detail.name,
							image: 'http://img.zmssp.cn/167100319442163845029.png?imageView2/1/w/100/h/100',
							params: {
								page: 6,
								id: that.$Route.query.id
							}
						});
					}
				});
			},
			receiveTask() {
				let that = this;
				uni.showLoading({title: '加载中'});
				that.$http('task.receiveTask', {task_id: this.detail.id}).then(res => {
					uni.hideLoading();
					this.$u.toast(res.msg);
					if (res.code == 1) {
						
					}
				});
			}
		}
	}
</script>

<style lang="less">
	pages {
		background: #f1f1f1;
	}
	.rules-item{
		padding-left: 20rpx;
	}

	.renwu-item {
		margin: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		line-height: 50rpx;
		
		.renwu-title{
			font-size:32rpx;
			font-weight:bold;
			line-height:160%;	
			padding-bottom:10rpx;
			}
		.renwu-time{
			font-size:24rpx;
			.lable{
				font-weight: bold;
			}
		}	
		.renwu-footer{
			display:flex;
			justify-content: flex-end;
			align-items: center;
			.btn-renwu-a{
				border-radius:100rpx;
				padding:10rpx 20rpx;
				background: #dd0000;
				border:2rpx solid #dd0000;
				color:#fff;
				font-size:24rpx;
			}
			.btn-renwu-b{
					border-radius:100rpx;
					padding:10rpx 20rpx;
					background: #fff;
					border:2rpx solid #dd0000;
					color:#dd00000;
					margin-right: 20rpx;
					font-size:24rpx;
			}
		}
	}
</style>
